<template>
  <div class="shopcart" v-if="data" :class="{shopcart_shop: !isEmpty}">
    <div class="shopcart-log">
      <span @click="showShopDialog = true">
        <span class="count" v-if="!isEmpty">{{ total }}</span>
        <i class="fa fa-cart-plus"></i>
      </span>
    </div>
    <div class="shopcart-price" @click="showShopDialog = true">
      <span class="select" v-if="isEmpty">未选择商品</span>
      <span class="price" v-else>￥{{totalPrice.toFixed(2)}}</span>
      <span class="distrifee">另需配送费{{data.rst.float_delivery_fee}}元</span>
    </div>
    <div class="settlement">
      <span v-if="isEmpty">￥{{data.rst.float_minimum_order_amount}}元起送</span>
      <button v-else @click="settle">去结算</button>
    </div>
    <transition name="fade">
      <div class="shopmask" @click.self="showShopDialog= false" v-if="showShopDialog && !isEmpty">
        <div class="shopcart-list">
          <div class="cart-list-header">
            <span>已选商品</span>
            <button>
              <i class="fa fa-trash-o"></i>
              <span @click="clearCart">清空</span>
            </button>
          </div>
          <div class="cart-list-main">
            <ul>
              <li v-for="(item,index) in cartList" :key="index">
                <h4>
                  <span>{{item.name}}</span>
                </h4>
                <span class="price">￥{{item.activity.fixed_price}}</span>
                <count :data="item" class="count" />
              </li>
            </ul>
          </div>
        </div>
      </div>

    </transition>
  </div>
</template>

<script>
import Count from '@/views/DetailShop/Count'

export default {
  name: 'ShopCart',
  props: {
    data: Object
  },
  data() {
    return {
      // 计算购物车总数量
      total: 0,
      // 计算总价
      totalPrice: 0,
      // 存放选中到购物车的商品
      cartList: [],
      // 显示购物清单列表
      showShopDialog: false
    }
  },
  computed: {
    isEmpty() {
      let empty = true
      this.total = 0
      this.totalPrice = 0
      this.cartList = []
      this.data.recommend.forEach(item => {
        item.items.forEach(current => {
          if (current.count) {
            this.total += current.count
            this.totalPrice += current.count * current.activity.fixed_price
            empty = false
            this.cartList.push(current)
          }
        })
      })

      this.data.menu.forEach(item => {
        item.foods.forEach(current => {
          if (current.count) {
            this.total += current.count
            this.totalPrice += current.count * current.activity.fixed_price
            empty = false
            this.cartList.push(current)
          }
        })
      })
      return empty
    }
  },
  methods: {
    clearCart() {
      this.data.recommend.forEach(items => {
        items.items.forEach(item => {
          item.count = 0
        })
      })

      this.data.menu.forEach(items => {
        items.foods.forEach(item => {
          item.count = 0
        })
      })
    },
    settle() {
      this.$store.dispatch('setFoodSelect', {
        shopInfo: this.data.rst,
        selectFoods: this.cartList
      })
      this.$router.push('/settlement')
    }
  },
  components: {
    Count
  }
}
</script>

<style lang="less" scoped>
.shopcart {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  z-index: 300;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: space-between;
  .shopcart-log {
    position: relative;
    z-index: 1000;

    box-shadow: 0 -0.8vw 0.533333vw 0 rgba(0, 0, 0, 0.1);
    height: 100%;
    padding-right: 100px;
    span {
      position: absolute;
      top: -17px;
      left: 14px;
      background-image: radial-gradient(circle, #363636 6.266667vw, #444 0);
      border: 1.333333vw solid #444;
      border-radius: 50%;
      padding: 10px;
      text-align: center;
      i {
        font-size: 30px;
      }
      .count {
        position: absolute;
        top: -8px;
        left: 28px;
        width: 5px;
        height: 5px;
        line-height: 5px;
        background-color: red !important;
        border: none;
      }
    }
  }
  .shopcart-price {
    position: relative;
    display: flex;
    flex-direction: column;
    line-height: 1.4;
    justify-content: center;
    font-size: 14px;
    margin-left: -70px;
    color: #666;
    z-index: 1000;
    .select {
      color: #fff;
    }
  }
  .settlement {
    position: relative;
    z-index: 1000;
    height: 100%;
    button {
      width: 105px;
      height: 100%;
      border: none;
      outline: none;
      color: #fff;
      background-color: #38ca73;
    }
    span {
      height: 100%;
      line-height: 48px;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      margin-right: 20px;
    }
  }
  .shopmask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    .shopcart-list {
      position: fixed;
      bottom: 45px;
      left: 0;
      right: 0;
      box-sizing: border-box;
      .cart-list-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        background-color: #eee;
        button {
          display: flex;
          align-items: center;
          border: none;
          i {
            margin-right: 5px;
          }
        }
      }
      .cart-list-main {
        background-color: #fff;
        ul {
          li {
            display: flex;
            justify-content: space-between;
            padding: 25px 20px;
            font-size: 18px;
            border: 1px solid #ccc;
            .price {
              flex: 2.5;
              color: red;
              font-weight: 600;
            }
            h4 {
              flex: 5.5;
            }
          }
        }
      }
    }
  }
}
.shopcart_shop {
  .shopcart-log {
    span {
      background-color: #3190e8 !important;
      background-image: none;
      i {
        color: #fff;
      }
    }
  }
  .shopcart-price {
    .price {
      color: #fff;
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.25s ease-out;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
